<template>
	<view class="container">
		<view class="list">
			<view class="item u-border-bottom" v-for="(item,i) of list" :key="i" @click="goChat(item.cmd, item.dst_id, item.title, i)">
				<view class="head">
					<!-- <image class="head-img" :src="item.avatar"></image> -->
					<u-avatar class="head-img" :src="item.avatar" size="96"></u-avatar>
					<view v-if="item.count > 0" class="red-dot">{{item.count}}</view>
					<view v-if="item.cmd == 11" class="group-dot">群</view>
				</view>
				<view class="info">
					<view class="top">
						<view class="left">{{item.title}} <!-- -{{item.cmd}} --></view>
						<view class="time">{{item.msgTime}}</view>
					</view>
					<view class="bottom">{{item.content}} <!-- -{{item.dst_id}} --></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
	data() {
		return {
			list: [],
			timeout: 30000, // 30s
			timeoutObj: null,
			userId: 0,
			token: '',
			userAvatar: '../../../static/logo.png',
			userNickname: ''
		};
	},
	computed: {
		...mapGetters(['isLogin']),
		...mapState(['loginInfo', 'userInfo', 'newMessage'])
	},
	// init初始化
	async created() {
		if (!this.isLogin) {
			this.$u.route({
				url: 'pages/auth/login/login',
				type: 'reLaunch'
			})
			return
		}
		await this.updateUserInfo()
		if (this.userInfo) {
			this.userId = this.userInfo.id
			this.token = this.loginInfo.token
			this.userAvatar = this.userInfo.avatar
			this.userNickname = this.userInfo.nickname
			
			// 将好友和群聊信息存入storage
			this.getFriendsList()
			this.getGroupList()
			
			this.getRealTimeMessage()
		}
	},
	methods: {
		...mapActions(['updateUserInfo', 'clearNewMessage']),
		recvMsg(data) {
			this.formatMessage(data)
		},
		formatMessage(message) {
			message.tag = message.cmd + '_' + message.dst_id
			message.createTime = message.created_at
			message.msgTime = this.$utils.formatDate(message.created_at)
			// console.log("message：", message)
			if (message.cmd == 10) {
				var userinfo = this.$utils.dataMap(this.$config.friends_list_key, message.dst_id)
				message.avatar = userinfo.avatar
				message.title = userinfo.nickname
			} else if (message.cmd == 11) {
				var groupinfo = this.$utils.dataMap(this.$config.group_list_key, message.dst_id)
				message.avatar = groupinfo.icon
				message.title = groupinfo.name
			}
			var len = this.list.length
			var flag = false // 标记是否存在数组里
			for (var i = 0; i < len; i++) {
				if (message.tag == this.list[i].tag) {
					if (message.count > 0) {
						var count = this.list[i].count
						message.count = count + 1
					}
					this.$set(this.list, i, message)
					flag = true
				}
			}
			if (!flag) {
				this.list.push(message)
			}
			this.list.sort(this.$utils.compare("createTime", false))
			// console.log(this.list)
		},
		async getUserInfo(userId) {
			let res = await this.$u.api.userInfo({userId: userId})
			if (res != '') {
				return res.data
			}
		},
		async getCommunityInfo(dstId) {
			let res = await this.$u.api.communityInfo({dstId: dstId})
			if (res != '') {
				return res.data
			}
		},
		goChat(cmd, dstId, title, list_key) {
			// console.log(cmd, dstId, title)
			this.list[list_key].count = 0
			if (cmd == 10) {
				this.$u.route('/pages/message/chat/chat', {
					dstId: dstId
				})
			} else {
				this.$u.route('/pages/message/groupChat/groupChat', {
					dstId: dstId,
					name: title
				})
			}
		},
		async getFriendsList() {
			let res = await this.$u.api.friendsList()
			if (res != '') {
				// console.log('将个人信息放入好友列表：', this.userInfo)
				res.data.push(this.userInfo)
				let data = this.$utils.reduceData(res.data)
				uni.setStorageSync(this.$config.friends_list_key, data);
			}
		},
		async getGroupList() {
			let res = await this.$u.api.communityList()
			if (res != '') {
				let data = this.$utils.reduceData(res.data)
				uni.setStorageSync(this.$config.group_list_key, data);
			}
		},
		// 请求获得实时消息记录
		async getRealTimeMessage() {
			let res = await this.$u.api.realTimeMessage()
			console.log('请求获得实时消息记录：', res)
			if (res != '') {
				let len = res.data.length
				for (var i = 0; i < len; i++) {
					var message = res.data[i]
					message.count = 0
					this.formatMessage(message)
				}
			}
		}
	},
	onShow() {
		// 从storage读取最新聊天记录
		// let list = uni.getStorageSync(this.$config.new_message_key)
		// for (var i = 0; i < list.length; i++) {
		// 	var message = list[i]
		// 	message.count = 0
		// 	this.formatMessage(message)
		// }
		// uni.setStorageSync(this.$config.new_message_key, [])
		
		console.log('展示最新消息', this.newMessage)
		for (var i = 0; i < this.newMessage.length; i++) {
			var message = this.newMessage[i]
			this.formatMessage(message)
		}
		this.clearNewMessage()
		
	}
};
</script>

<style lang="scss" scoped>
.container {
	.list {
		.item {
			display: flex;
			align-items: center;
			padding: 20rpx 32rpx;
			.head {
				position: relative;
				.head-img {
					background: #ffe431;
					border-radius: 24rpx;
				}

				.red-dot {
					position: absolute;
					left: 68rpx;
					top: -8rpx;
					padding: 2rpx 10rpx;
					background: #ff5d5b;
					border-radius: 18rpx;
					font-size: 24rpx;
					line-height: 32rpx;
					color: #ffffff;
					letter-spacing: -0.41rpx;
				}
				.group-dot {
					position: absolute;
					left: 0;
					top: -8rpx;
					padding: 2rpx 10rpx;
					background: #FF9900;
					border-radius: 18rpx;
					font-size: 24rpx;
					line-height: 32rpx;
					color: #ffffff;
					letter-spacing: -0.41rpx;
				}
			}
			.info {
				margin-left: 32rpx;
				width: 100%;
				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left {
						font-size: 36rpx;
						color: #272832;
						letter-spacing: -1.23rpx;
						line-height: 50rpx;
					}
					.time {
						font-size: 24rpx;
						color: rgba(39, 40, 50, 0.4);
						letter-spacing: -0.82rpx;
						line-height: 34rpx;
					}
				}
				.bottom {
					font-size: 28rpx;
					color: rgba(39, 40, 50, 0.6);
					letter-spacing: -0.96rpx;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
}
</style>
